<template>
  <div>
    <h1>List</h1>
    <!-- 可以通过向组件中写入结构的方式向子组件传递,子组件中使用slot接收,这个slot就被称为插槽 -->
    <!-- 插槽可以生成只有部分差距的相同组件,提升了组件的复用率 -->
    <!-- 每个插槽都会拥有一个名字,用于接收含有同样配置名的结构,如果不使用name,就会默认将所有slot赋予同一个插槽中,默认名为default -->
    <ul>
      <Item>
        <template :slot="'default'">
          <li>默认插槽</li>
        </template>
      </Item>
      <Item>
        <template :slot="'default'">
          <li>插槽二</li>
        </template>
      </Item>
      <Item>
        <template :slot="'default'">
          <li>插槽三</li>
        </template>
        <!-- 拥有姓名的被称为具名插槽 -->
        <footer :slot="'footer'">底部</footer>
      </Item>
    </ul>
  </div>
</template>

<script>
import Item from './Item.vue'
export default {
  data() {
    return {
      eat: [
        { id: '001', type: '北京', list: ['卤煮', '豆汁'] },
        { id: '002', type: '上海', list: ['红烧肉', '小笼包'] },
        { id: '003', type: '武汉', list: ['热干面', '巴子'] },
      ],
    }
  },
  components: {
    Item,
  },
}
</script>

<style scoped>
ul {
  list-style: none;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}
ul li {
  height: 150px;
  width: 300px;
  text-align: center;
  border: solid;
}
</style>
